<template>
  <div class="home">
    <el-container class="page-container">
      <el-header>
        <div>众惠商城</div>
        <el-dropdown trigger="click" @command="appMenuClick">
          <span class="el-dropdown-link">
            管理员<i class="el-icon-caret-bottom el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              class="clearfix"
              v-for="(item, index) in appMenu"
              :key="index"
              :command="item"
            >
              {{ item.title }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu default-active="2" class="el-menu-vertical-demo">
            <el-submenu
              v-for="(item, index) in subMenu"
              :key="index"
              :index="index + ''"
              @click="handleUser(subitem.pageName)"
            >
              <!-- v-if="item.pageName.length > 0" -->
              <template slot="title">
                <i :class="item.icon"></i>
                <span>{{ item.title }}</span>
              </template>

              <el-menu-item
                @click="handleUser(subitem.pageName)"
                v-for="(subitem, subindex) in item.children"
                :index="index + '-' + subindex"
                :i="subitem.pageName"
                :key="subindex"
                >{{ subitem.title }}</el-menu-item
              >
            </el-submenu>

            <!-- <el-menu-item
              @click="handleUser(subitem.pageName)"
              v-else
              v-for="subitem in item.children"
              :key="subitem"
              >{{ subitem.title }}</el-menu-item
            > -->
          </el-menu>
        </el-aside>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { subMenu, appMenu } from "../config";
export default {
  data() {
    return {
      subMenu,
      appMenu,
    };
  },
  methods: {
    handleUser(name) {
      this.$router.push({ name });
    },
    appMenuClick(item){
      if(item.title=='退出登陆'){
        this.$store.commit("logout");
        this.$message.success("注销成功");
        setTimeout(() => {
          this.$router.push({
            name: "login",
          });
        }, 500);
      }
    }
  },
};
</script>
<style lang="scss" scoped>
.el-header {
  user-select: none;
  background: #606266;
  color: #fff;
  display: flex;
  align-items: center;
}
.el-main {
  background-color: #e9eef3;
  // color: #333;
  text-align: center;
}

.page-container {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  height: 100%;
}

.el-dropdown {
  margin-left: auto;
  color: #fff;
}
.el-header {
  position: sticky;
  top: 0;
  z-index: 10;
}
// .el-container:nth-child(5) .el-aside,
// .el-container:nth-child(6) .el-aside {
//   line-height: 260px;
// }

// .el-container:nth-child(7) .el-aside {
//   line-height: 320px;
// }
.el-aside {
  position: relative;
  height: 100%;
  width: 200px;
  user-select: none;
}
</style>
